<html>
<head>
    <style type="text/css">
        span.total {text-align:center; margin:10px 0 0; top:26px; right:0; font-size:12px; font-weight:normal; color:#999}
        div {margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}
        div.view{ background: #141517; border-radius: 8px; padding:15px; text-align:center; margin-bottom:10px; 
         -webkit-box-shadow: inset 0 1px 0 black, 0 1px 0 rgba(255, 255, 255, 0.06);
         -moz-box-shadow: inset 0 1px 0 black, 0 1px 0 rgba(255, 255, 255, 0.06);
         box-shadow: inset 0 1px 0 black, 0 1px 0 rgba(255, 255, 255, 0.06); }
    </style>
</head>
<body>
  <div class="view">
    <button id="prev" onclick="goPrevious()">Previous</button>
    <button id="next" onclick="goNext()">Next</button>
    <input id="movePage" type="text"><button  onclick="goPage()">Move</button>
    
    
    &nbsp; &nbsp;
    <span class="total">Page: <strong><span id="page_num"></span></strong> / <strong><span id="page_count"></span></strong></span>
  
    <canvas id="the-canvas" style="border:1px solid black"></canvas>
  </div>

  <!-- Use latest PDF.js build from Github -->
  <script type="text/javascript" src="https://raw.github.com/mozilla/pdf.js/gh-pages/build/pdf.js"></script>
  <script type="text/JavaScript" src="/resources/javascript/lib/jquery-1.9.1.js"></script>
  
  <script type="text/javascript">
    //
    // NOTE: 
    // Modifying the URL below to another server will likely *NOT* work. Because of browser
    // security restrictions, we have to use a file server with special headers
    // (CORS) - most servers don't support cross-origin browser requests.
    //
    var url = 'http://cdn.mozilla.net/pdfjs/tracemonkey.pdf';

    //
    // Disable workers to avoid yet another cross-origin issue (workers need the URL of
    // the script to be loaded, and currently do not allow cross-origin scripts)
    //
    PDFJS.disableWorker = true;

    var pdfDoc = null,
        pageNum = 1,
        scale = 0.8,
        canvas = document.getElementById('the-canvas'),
        ctx = canvas.getContext('2d');

    //
    // Get page info from document, resize canvas accordingly, and render page
    //
    function renderPage(num) {
      // Using promise to fetch the page
      pdfDoc.getPage(num).then(function(page) {
        var viewport = page.getViewport(scale);
        canvas.height = viewport.height;
        canvas.width = viewport.width;

        // Render PDF page into canvas context
        var renderContext = { 
          canvasContext: ctx,
          viewport: viewport
        };
        page.render(renderContext);
      });

      // Update page counters
      document.getElementById('page_num').textContent = pageNum;
      document.getElementById('page_count').textContent = pdfDoc.numPages;
    }

    //
    // Go to previous page
    //
    function goPrevious() {
      if (pageNum <= 1)
        return;
      pageNum--;
      renderPage(pageNum);
    }

    //
    // Go to next page
    //
    function goNext() {
      if (pageNum >= pdfDoc.numPages)
        return;
      pageNum++;
      renderPage(pageNum);
    }
    
    function goPage() {
    	
    	var page = $('#movePage').val();
    	renderPage(page);
    	document.getElementById('page_num').textContent = page;
   }


    //
    // Asynchronously download PDF as an ArrayBuffer
    //
    PDFJS.getDocument(url).then(function getPdfHelloWorld(_pdfDoc) {
      pdfDoc = _pdfDoc;
      renderPage(pageNum);
    });
  </script>  
</body>
</html>
